<template>
  <basic-container :btnFlag = true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>

      <el-collapse v-model="activeNames" @change="handleChange" style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">规划信息</div>
            </div>
          </template>
          <div style="float: right;
                      font-size: 18px;
                      text-align: center;
                      margin-right: 51px;" v-if="pmuc">
            <span>规划编码：</span>
            <span style="display: inline-block">{{pmuc}}</span>
          </div>
          <div class="searchDetail">
            <bostech-detail :detail-data="detailData"></bostech-detail>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2" v-if="reviewHaveDataFlag">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">发布详情</div>
            </div>
          </template>
          <review-list :achievementId="achievementId" @haveDataFlag="reviewHaveDataMethod"></review-list>
        </el-collapse-item>
        <el-collapse-item name="3" v-if="applyDataFlag">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">办理情况</div>
            </div>
          </template>
          <avue-crud :data="applyData"
                     :option="applyOption"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getHisTaskList"
                     @refresh-change="refreshHisTaskChange"
          >
          </avue-crud>
        </el-collapse-item>
        <el-collapse-item name="4" v-if="msgFlag">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">会商意见</div>
            </div>
          </template>
          <el-tabs v-model="activeName" style="padding: 12px;margin-top:20px;" v-if="msgFlag">
            <el-tab-pane
              :label="item.deptName"
              :name="changeToStr(item.topicId)"
              v-for="(item,index) in msgList"
              :key="item.topicId">
              <msg-nobtn :msg-data="msgDataListtemp"></msg-nobtn>
              <el-pagination
                @size-change="sizeChange"
                @current-change="onLoad"
                :current-page="pagetemp.currentPage"
                :page-size="pagetemp.pageSize"
                :total="pagetemp.total"
                :page-sizes="[10, 20, 30, 40 ,50 ,100]"
                layout="total, sizes, prev, pager, next, jumper"
                v-if="msgDataListtemp.length>0"
                class="paginationcss">
              </el-pagination>
              <div v-if="msgDataListtemp.length<=0" style="text-align: center;
          font-size: 18px;
          margin-top: 28px;">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
          <div v-if="!msgFlag" style="text-align: center;font-size: 18px;margin-top: 20px;">
            暂无数据</div>
        </el-collapse-item>
      </el-collapse>
      <div class="consult-button">
        <el-button type="info" size="small" @click.stop="goBack()">关闭</el-button>
      </div>

    </div>
  </basic-container>
</template>
<script>
  import {PROJECT_DIC} from '@/const/dict'
  import {projectRegister,projectDetail,historyTask} from "@/api/planning/project";
  import {resultDetail} from "@/api/planning/result";
  import {messagePage} from '@/api/planning/message'
  import chatMsg from '@/components/bostech/chat-msg'
  import getDetailData from "@/mixins/getDetailData";
  import { mapGetters } from "vuex"
  import {getfileinfopage} from "@/api/system";
  import MsgNobtn from "@/components/bostech/msg-nobtn";
  // 引入审批详情列表
  import reviewList from "@/components/review/reviewList";
  export default {
    name: "tagReply",
    mixins: [getDetailData()],
    components: {
      chatMsg,
      MsgNobtn,
      reviewList // 审批详情列表
    },
    watch: {
      'activeName'(val) {
        this.topicIdtemp = Number(val);
        this.onLoadFortabs();
      }
    },
    data() {
      return {
        publicPath: process.env.BASE_URL,
        headerData:{
          title:'规划详情'
        },
        achievementId:'',//成果ID
        reviewHaveDataFlag:true,// 审批列表是否显示标志
        pmuc:'',// 规划编码
        activeNames: ["1","2","3","4"],
        firstTrialData:[
          {label:'部门人员',value:'发改委'},
        ],
        //办理情况分页参数
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        applyData: [],//办理情况列表
        //办理情况表格类型
        applyOption: {
          page:true,
          menu: false,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "用户",
              width: 240,
              prop: "assigneeNickname",
              cell: true
            },
            {
              label: "环节",
              prop: "taskName",
              cell: true,
            },
            {
              label: "结果",
              prop: "opinion",
              cell: true
            },
            {
              label: "操作时间",
              prop: "date",
              cell: true
            }
          ]
        },
        applyDataFlag:true,
        detailData:[],
        msgList:[],
        msgFlag:false,
        tableData: [],
        tableLoading: false,
        multiplefiles:[],
        pagetemp: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        pageSizetemp:10,
        currenttemp:1,
        activeName: 0,
        topicIdtemp:0,
        registerinfoId:'',
        msgDataListtemp:[],
      };
    },
    async created(){
      this.achievementId = this.$route.params.id;
      await this.getDetailData();
    },
    computed: mapGetters([
      "userInfo"
    ]),
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      handleChange(val) {
      },
      // 获取详情信息
      async getDetailData(){
        await resultDetail(this.$route.params.id).then(response => {
          this.registerinfoId=response.data.data.registerinfoId;
          this.getHisTaskList(1,{});
          this.getresultDetail(response);
        })
      },
      async  getresultDetail(response){
        if(response.data.code == '0') {
          var records = response.data.data;
          if(records.fileId!="" && records.fileId !=null) {
            this.multiplefiles = [];
            this.multiplefiles = await this.getfileinfopagetemp(records);
          }
          this.pmuc = records.pmuc;
          this.getresultDetailDate(records);
          if(records.registerinfoId){
            this.getReisterInfo(records.registerinfoId)
          }
        }
      },
      getfileinfopagetemp(records){
        return new Promise((resolve, reject) => {
          if(records.fileId!="" && records.fileId !=null){
            getfileinfopage(Object.assign({
              current: 1,
              size: 100,
              fileIds:records.fileId
            })).then(response => {
              var multiplefiles = response.data.data.records;
              resolve(multiplefiles);
            }).catch(
            )
          }
        })

      },
      // 获取规划
      getReisterInfo(id){
        projectDetail(id).then(response => {
          if(response.data.code == '0') {
            var records = response.data.data;
            if(records.registerinfoTopicVOList.length>0){
              this.msgFlag = true;
              for(var i in records.registerinfoTopicVOList){
                this.getMessage(records.registerinfoTopicVOList[i],i);
              }
            }
          }
        })
      },
      // 获取历史办理情况
      getHisTaskList(page,params){
        // console.log(3434,params)
        if (this.registerinfoId === '') return ;
        console.log(9090,this)
        historyTask(this.registerinfoId,Object.assign({
        // historyTask(this.$route.params.id,Object.assign({
          current: page.currentPage,
          size: page.pageSize,
        },params)).then(response => {
          console.log(1212,response)
          this.applyData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
          if(this.applyData.length>0){
            this.applyDataFlag = true
          }else{
            this.applyDataFlag = false
          }
        })
      },
      refreshHisTaskChange(){},
      getMessage(obj,item){
        messagePage(Object.assign({
          current: 1,
          size: 100,
          topicId:obj.topicId,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            var pagetemp = {};
            pagetemp.currentPage = response.data.data.current;
            pagetemp.pageSize = response.data.data.size;
            pagetemp.total = response.data.data.total;
            this.activeName = (obj.topicId).toString(); //tabs默认显示第一个部门
            this.topicIdtemp = obj.topicId;
            this.pagetemp = pagetemp;

            this.putList(record,obj.deptName,obj.topicId,this.pagetemp);
          }
        })
      },
      putList(record,deptName,topicId,pagetemp){
        this.msgListtemp=[];
        if(record!=null){
          this.recursive(record);    //递归消息放入消息列msgListtemp中
        }

        var msgMap = {
          deptName:deptName,
          msgDataList:this.msgListtemp,
          topicId:topicId,
          pagetemp:pagetemp,
        };
        if(record!=null){
          this.msgDataListtemp = msgMap.msgDataList;
        }
        if(this.msgList.length!=0){
          for(let item in this.msgList){
            if(this.msgList[item].topicId == msgMap.topicId){
              msgMap.deptName = this.msgList[item].deptName
            }
          }
        }
        let index = this.indexOf(this.msgList,topicId);
        if(index > -1){
          this.msgList.splice(index,1)
        }
        this.msgList.push(msgMap)
      },
      recursive(record,deptName){
        for(var i in record){
          var flag = false;
          if(record[i].senderId == this.userInfo.userId){
            flag = true
          }
          if(record[i].parentId!==null){
            var righttemp = 1;     //是子消息
          }else {
            righttemp = 0;     //不是子消息
          }
          var msgDataMap = {
            orgName:record[i].senderNickname,
            nickName:record[i].senderNickname?record[i].senderNickname.substring(0,2):'',
            msgTime:record[i].sendTime,
            msgContent:record[i].content,
            replyFlag:flag,
            senderId:record[i].senderId,
            topicId:record[i].topicId,
            messageId:record[i].messageId,
            rightaway:righttemp,
            fileId:record[i].fileId,
            filenametemp:record[i].fileFullName,
          };
          this.msgListtemp.push(msgDataMap);
          if(record[i].children!==null){ //当还有子消息时继续递归
            this.recursive(record[i].children);
          }
        }
      },
      //当点击显示第几页时触发
      onLoad(page){
        this.currenttemp=page;
        messagePage(Object.assign({
          current: page,// 当前页数
          size: this.pageSizetemp,// 每页显示多少条
          topicId:this.topicIdtemp,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            var pagetemp = {};
            pagetemp.currentPage = response.data.data.current;
            pagetemp.pageSize = response.data.data.size;
            pagetemp.total = response.data.data.total;
            this.pagetemp = pagetemp;
            this.putList(record,'占位部门名称',this.topicIdtemp,this.pagetemp);
          }
        })
      },
      //当每页显示的条数改变时触发
      sizeChange(page){
        messagePage(Object.assign({
          current: 1,// 当前页数
          size: page,// 每页显示多少条
          topicId:this.topicIdtemp,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            var pagetemp = {};
            pagetemp.currentPage = response.data.data.current;
            pagetemp.pageSize = response.data.data.size;
            pagetemp.total = response.data.data.total;
            this.pagetemp = pagetemp;
            this.putList(record,'占位部门名称',this.topicIdtemp,this.pagetemp);
          }
        })
      },
      onLoadFortabs(){
        messagePage(Object.assign({
          current: 1,// 当前页数
          size: 10,// 每页显示多少条
          topicId:this.topicIdtemp,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;
            this.pagetemp = this.page;
            this.putListForpage(record);
          }
        })
      },
      putListForpage(record){
        this.msgListtemp=[];

        if(record!=null){
          this.recursive(record);    //递归消息放入消息列msgListtemp中
        }

        if(record!=null){
          this.msgDataListtemp = this.msgListtemp;
        }
      },
      reviewHaveDataMethod(data){
        this.reviewHaveDataFlag = data
      },
      changeToStr(val){
        return ''+val
      },
      indexOf(array,val){
        for (let i = 0; i < array.length; i++) {
          if (array[i].topicId == val) return i;
        }
        return -1;
      }

    }
  };
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
    width: 480px;
  }
  .head-title {
    color: rgb(2, 2, 2);
    text-align: left;
    display: inline;
    font-weight: 600;
  }
  .collapse-title{
    font-size:1rem;
  }
  .head-explain {
    color: #333;
    text-align: left;
    display: inline;
    font-size: 14px;
    font-weight: 600;
  }
  .form-group {
    padding: 20px;
  }
  .form-label {
    font-weight: 600;
    display: inline-block;
    width: 140px;
  }
  .collapse-header {
    display: inline-block;
    width: 94%;
  }

  .consult-button {
    margin: 2rem 0;
    text-align: center;
  }

  .chatbox {
    height: 500px;
    width: 100%;
    border: 1px solid #d2d2d2;
    border-width: 1px 0;
    overflow-y: auto;
    padding-bottom: 30px;
  }
  .paginationcss{
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
</style>
